<script setup lang="ts">
import { ref} from "vue"
import type {PropType} from 'vue'
import PlayListSongsB from "@/components/playlist/PlayListSongsB.vue";

defineExpose({
  handleScroll () {
  }
})

defineProps({
  songs:{
    required: true,
    type: Object as PropType<song_info[]>
  }
})

const activeName = ref('songs')


const tabRef = ref(null)

</script>

<template>
<!--  <div class="tabs">-->
<!--    <el-tabs v-model="activeName" class="playlist-tabs" @tab-click="handleClick" >-->
<!--      <el-tab-pane :label="'歌曲' + songs.length" name="songs" >-->
<!--        <div class="list" ref="tabRef">-->
<!--          <PlayListSongs :songs="songs"></PlayListSongs>-->
<!--        </div>-->
<!--      </el-tab-pane>-->
<!--      <el-tab-pane label="评论" name="comment"></el-tab-pane>-->
<!--    </el-tabs>-->
<!--  </div>-->
  <div class="tabs">
    <el-tabs v-model="activeName" class="playlist-tabs" >
      <el-tab-pane :label="'歌曲' + songs.length" name="songs" >
        <div class="list" ref="tabRef">
          <PlayListSongsB :songs="songs"></PlayListSongsB>
        </div>
      </el-tab-pane>
      <el-tab-pane label="评论" name="comment"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<style lang="scss" scoped>
.tabs{
  margin-top: 20px;
  position: -webkit-sticky;
  position: sticky;
  top: 75 + 20 + 167px;
  height: 100%;
}


</style>